<!--  -->
<template>
  <div class="mirror-details">
    <div class="header">
      <div class="header-wrap">
        <h2>{{mirrorDetailsCon.name?mirrorDetailsCon.name:'--'}}</h2>
        <div class="header-box">
          <ul class="header-left">
            <li class="header-left-list">
              <!-- <i class="mirror-size-ico mirror-ico"></i> -->
              <span>大小</span>&nbsp;{{mirrorDetailsCon.size?mirrorDetailsCon.size:'--'}}
            </li>
            <li class="header-left-list">
              <!-- <i class="mirror-user-ico mirror-ico"></i> -->
              <span>使用</span>&nbsp;{{mirrorDetailsCon.useCount?mirrorDetailsCon.useCount:'--'}}
            </li>
            <li class="header-left-list">
              <!-- <i class="mirror-language-ico mirror-ico"></i> -->
              <span>编程语言</span>&nbsp;{{mirrorDetailsCon.language?mirrorDetailsCon.language:'--'}}
            </li>
            <li class="header-left-list">
              <!-- <i class="mirror-algorithm-ico mirror-ico"></i> -->
              <span>算法框架</span>&nbsp;{{mirrorDetailsCon.framework?mirrorDetailsCon.framework:'--'}}
            </li>
          </ul>
          <div class="header-right">
            <!-- <i class="mirror-editor-ico mirror-ico"></i>编辑 -->
            <span class="header-right-edit" v-if="!editMirror" >
              <!-- <i class="mirror-editor-ico mirror-ico"></i> -->
              <i class="el-icon-edit-outline editor-mirror-pad"></i>
              <span class="" @click="doEditMirror">编辑</span>
            </span>
            <span class="header-right-save" v-if="editMirror">
              <!-- <i class="mirror-editor-ico mirror-ico"></i><span @click="doSaveMirror">保存</span>
              <i class="mirror-editor-ico mirror-ico"></i><span @click="doCancleMirror">取消</span> -->
              <el-button class="icon-cancle" @click="doCancleMirror">取消</el-button>
              <el-button class="icon-save" type="primary" @click="doSaveMirror">保存</el-button>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="mirror-details-con">
      <div class="note-content">
        <div v-if="!editMirror">
          <viewer
            :value="mirrorDetailsViewerData"
            height="500px"
          />
        </div>
        <!-- <vue-editor v-show="editNotes" class="editor-box" v-model="notebookData"></vue-editor> -->
        <editor
          v-show="editMirror"
          ref="tuiEditor"
          v-model="mirrorDetailsData"
          :options="editorOptions"
          previewStyle="vertical"
          height="500px"
        />
      </div>
    </div>
  </div>
</template>

<script>
import 'tui-editor/dist/tui-editor.css'
import 'tui-editor/dist/tui-editor-contents.css'
import 'codemirror/lib/codemirror.css'
import { Editor, Viewer } from '@toast-ui/vue-editor'

import { getUserImageById, updateUserImageContent } from '@/api/mirror'
import qs from 'qs'

export default {
  data () {
    return {
      mirrorDetailsCon: [],
      mirrorDetailsViewerData: '',
      mirrorDetailsData: '',
      editMirror: false,
      editorOptions: {
        hideModeSwitch: true
      }
    }
  },

  components: {
    'editor': Editor,
    'viewer': Viewer
  },

  computed: {},

  mounted () {
    this._getUserImageById()
  },

  methods: {
    // 编辑
    doEditMirror () {
      this.editMirror = true
      this.$nextTick(() => {
        this.$refs.tuiEditor.invoke('setValue', this.mirrorDetailsData)
        this.$refs.tuiEditor.invoke('scrollTop', 1)
      })
    },
    // 取消
    doCancleMirror () {
      this.editMirror = false
      this.mirrorDetailsData = this.mirrorDetailsViewerData
    },
    // 保存
    doSaveMirror () {
      if (this.mirrorDetailsData.length > 900000000000) {
        this.$message({ message: '笔记不超过900000000000个字符长度', showClose: true, type: 'warning' })
        return false
      }
      this.editMirror = false
      this._updateUserImageContent()
    },
    // 修改内容
    _updateUserImageContent () {
      let data = qs.stringify({
        id: this.$route.query.id,
        content: this.mirrorDetailsData,
        contentMk: this.mirrorDetailsData
      })
      updateUserImageContent(data).then(res => {
        if (res.message.code === 0) {
          this.$message({ message: '修改成功！', showClose: true, type: 'success' })
          this._getUserImageById()
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 获取镜像详情
    _getUserImageById () {
      let data = qs.stringify({
        id: this.$route.query.id
      })
      getUserImageById(data).then(res => {
        if (res.message.code === 0) {
          this.mirrorDetailsCon = res.data
          this.mirrorDetailsViewerData = res.data.contentMk
          this.mirrorDetailsData = res.data.contentMk
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    }
  }
}

</script>
<style lang="stylus">
@import "../../common/stylus/header_editor_box"
  .mirror-details
    .tui-editor-contents
      word-break break-all
    .header
      width 100%
      background #F4F7F8
      .header-wrap
        max-width 1162px
        margin 0 auto
      h2
        font-size 22px
        line-height 30px
        color #2D323B
        font-weight bold
        padding-top 24px
      .header-box
        display flex
        padding 17px 0 23px
        justify-content space-between
        align-items flex-end
        .header-left
          font-size 14px
          line-height 20px
          color #2D323B
          .header-left-list
            display inline-block
            margin-right 20px
            color #2D323B
            span
              color #999999
        .header-right
          font-size 14px
          line-height 20px
          color #2D323B
          width 150px
          text-align right
          .header-right-save
            cursor pointer
            display inline-block
          .header-right-edit
            cursor pointer
        .mirror-ico
          width 12px
          height 12px
          margin-top 3px
          margin-right 6px
          display inline-block
          &.mirror-size-ico
            background url(../../common/image/icon/mirror-size-ico.png) no-repeat center
            background-size 12px 12px
          &.mirror-user-ico
            background url(../../common/image/icon/mirror-user-ico.png) no-repeat center
            background-size 12px 12px
          &.mirror-language-ico
            background url(../../common/image/icon-project/icon-project-language.png) no-repeat center
            background-size 12px 12px
          &.mirror-algorithm-ico
            background url(../../common/image/icon/mirror-ico-algorithm.png) no-repeat center
            background-size 12px 12px
          &.mirror-editor-ico
            background url(../../common/image/icon/mirror-editor-ico.png) no-repeat center
            background-size 12px 12px
  .mirror-details-con
    max-width 1162px
    overflow hidden
    padding-top 22px
    margin 0 auto
    .con-title
     font-size 14px
     line-height 24px
     color #2D323B
     padding 22px 0 12px
</style>
